// 主题颜色变量
$primary-color: #4facfe;
$secondary-color: #00f2fe;
$accent-color: #00d4ff;
$success-color: #43e97b;
$warning-color: #ff9a9e;
$error-color: #ff6b6b;
$info-color: #38f9d7;

// 渐变色
$primary-gradient: linear-gradient(135deg, #{$primary-color} 0%, #{$secondary-color} 100%);
$success-gradient: linear-gradient(135deg, #{$success-color} 0%, #{$info-color} 100%);
$warning-gradient: linear-gradient(135deg, #{$warning-color} 0%, #fad0c4 100%);
$error-gradient: linear-gradient(135deg, #{$error-color} 0%, #ee0979 100%);

// 背景色
$bg-primary: #f8f9fa;
$bg-secondary: #ffffff;
$bg-card: #ffffff;

// 文字颜色
$text-primary: #333333;
$text-secondary: #666666;
$text-muted: #999999;
$text-white: #ffffff;

// 边框颜色
$border-light: #f0f0f0;
$border-medium: #e0e0e0;
$border-dark: #d0d0d0;

// 阴影
$shadow-light: 0 2px 8px rgba(0, 0, 0, 0.05);
$shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
$shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.15);

// 圆角
$radius-small: 8px;
$radius-medium: 12px;
$radius-large: 16px;
$radius-round: 50%;

// 间距
$spacing-xs: 5px;
$spacing-sm: 10px;
$spacing-md: 15px;
$spacing-lg: 20px;
$spacing-xl: 30px;

// 字体大小
$font-xs: 12px;
$font-sm: 14px;
$font-md: 16px;
$font-lg: 18px;
$font-xl: 20px;
$font-xxl: 24px;

// 通用样式类
.theme-bg-primary {
  background: $primary-gradient;
}

.theme-bg-card {
  background-color: $bg-card;
  border-radius: $radius-medium;
  box-shadow: $shadow-light;
}

.theme-text-primary {
  color: $text-primary;
}

.theme-text-secondary {
  color: $text-secondary;
}

.theme-text-muted {
  color: $text-muted;
}

.theme-text-white {
  color: $text-white;
}

.theme-btn-primary {
  background: $primary-gradient;
  color: $text-white;
  border-radius: $radius-medium;
  border: none;
  padding: $spacing-sm $spacing-lg;
  font-size: $font-md;
  font-weight: 600;
}

.theme-btn-secondary {
  background-color: $bg-secondary;
  color: $primary-color;
  border: 1px solid $primary-color;
  border-radius: $radius-medium;
  padding: $spacing-sm $spacing-lg;
  font-size: $font-md;
}

.theme-input {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: $radius-medium;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: $spacing-md $spacing-lg;
  color: $text-white;
  backdrop-filter: blur(10px);
}

.theme-card {
  background-color: $bg-card;
  border-radius: $radius-medium;
  padding: $spacing-md;
  box-shadow: $shadow-light;
  margin-bottom: $spacing-md;
}

// 页面容器样式
.page-container {
  min-height: 100vh;
  background: $primary-gradient;
  position: relative;
}

.page-content {
  background-color: $bg-primary;
  border-top-left-radius: $spacing-lg;
  border-top-right-radius: $spacing-lg;
  min-height: calc(100vh - 120px);
  margin-top: 120px;
  padding: $spacing-lg;
}

// 导航栏样式
.nav-bar {
  background: $primary-gradient;
  color: $text-white;
  padding: $spacing-md;
}

.nav-title {
  color: $text-white;
  font-size: $font-lg;
  font-weight: bold;
}

// 底部导航样式
.tab-bar-theme {
  background-color: $bg-secondary;
  border-top: 1px solid $border-light;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.tab-item-theme {
  color: $text-muted;
  
  &.active {
    color: $primary-color;
  }
}

// 按钮悬停效果
.theme-btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

// 卡片悬停效果
.theme-card:active {
  transform: translateY(-2px);
  box-shadow: $shadow-medium;
}